<template>
  <!-- #ifdef MP-WEIXIN -->
  <!-- (marginValue + 80) + 'px' -->
	<view class="" :style="{'margin-top': `${phoneType == 'Xiaomi'?  (marginValue + 100) + 'px':(marginValue + 80) + 'px'}`}">
    <!-- #endif -->
    <!-- #ifdef APP-PLUS || H5 -->
      <view class="" :style="{'margin-top': 200 + 'rpx'}">
    <!-- #endif -->
        <view class="topBox"
        >
          <view class="tabs">
            <view
                @click.stop="jump('/pages/activity/sign/index')"
                style="position: absolute;left: 30rpx">
				<view class="sign" 
			  style="width: 120rpx;height: 50rpx;margin-top: 20rpx;color: #666;" >
				签到
			  </view>
              <!-- <image
                  src="https://image.hzwltb69.com/app/date/2023/newSign.png"
                  style="width: 120rpx;height: 50rpx;margin-top: 20rpx">
			</image> -->
            </view>
            <view
                v-for="item,index in list"
                :key="index"
                style="margin-left: 20rpx"
                @click="onBack(index)"
                :class="{'tab-text':index == 1}"
				class="tab-texts"
            >
              {{item.name}}
            </view>
          </view>
          <!-- 顶部搜索 -->
          <view class="indexsearch"
                @click.stop="$Router.push('/pages/public/search')">
            搜索商品
          </view>
        </view>
		<scroll-view scroll-y="true">
			<view v-for="item,index in resList" :key="index" class="">
				<view v-if="!item.isSource" class="store-box">
					<view class="store-card">
						<view class="store-title">
							<view class="title-left">
								<view class="title-img">
									<image v-if="item.logo" mode="aspectFit" :src="item.logo" alt=""></image>
									<view v-else class="store-name">
										{{item.name.slice(0,1)}}
									</view>
                </view>
								<view class="title-right">
									<view class="title-top">
										{{item.name}}
									</view>
									<view class="title-info">
										{{item.keyword}}
									</view>
								</view>
							</view>
							<view class="store-btn" @click="toStore(item.id)">
								进入店铺
							</view>
						</view>
						<view class="store-img">
							<view
							v-for="items,indexs in item.productList"
							:key="items.id"
							@click="toDetail(items.id)"
							class="img-card">
								<image :src="items.img" mode="widthFix" alt="" />
							</view>
						</view>
					</view>
				</view>
				<view v-if="item.isSource" class="meta-card" style="margin-top: 20rpx;">
					<view class="store-card" style="height: 100%;">
						<view class="store-title">
							<view class="title-left">
								<view class="title-img">
									<image v-if="item.logo" :src="item.logo" mode="widthFix" alt="">
										</image>
									<view v-else class="store-name">
										{{item.name.slice(0,1)}}
									</view>
								</view>
								<view class="title-right">
									<view class="title-top">
										{{item.name}}
									</view>
									<view class="title-info">
										{{item.keyword}}
									</view>
								</view>
							</view>
							<view class="store-btn" @click="toStore(item.id)">
								进入店铺
							</view>
						</view>
						<view class="card-content">
							<view v-html="filter(item.source.content)" style="margin-left: 100rpx;padding-right: 30rpx;" class="">
							</view>
							<view class="img-box">
								<img v-for="imgitem,imgindex in item.source.imgs" @click="onLook(item.source.imgs,imgindex)"
								:key="imgindex"
								:src="imgitem">
							</view>
							<view  @click="toDetail(item.source.productId)" class="tip">
								<view class="tip-content">
									{{item.source.content}}
								</view>
								<view class="arrow">
									<img src="https://image.hzwltb69.com/app/imgs/derivative/rights.png" alt="">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
		</scroll-view>
		<view class="">
			<u-loadmore v-show="isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
	</view>
  </view>
</template>

<script>
	export default{
		data(){
				
			return{
				resList: [],
				page: 0,
				onEnd: false,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				isEmpty: true,
        marginValue: 0,
        list:[{
          name:'商城'
        },
          {
            name: '订阅'
          }
        ],
		phoneType:''
			}
		},
		created() {
			this.getList()
			this.marginValue = uni.getSystemInfoSync().statusBarHeight
			this.phoneType = uni.getSystemInfoSync().brand
		},
		methods:{
      onBack(e){
        if(e == 0){
          this.$emit('onBack')
        }
      },
			filter(e){
				const regex = /\n/g;
				const replacedString = e.replace(regex, "<br>");
				return replacedString
			},
			// 跳转商品
			toDetail(e){
				console.log(e,'==============');
				this.$Router.push({
					path: '/pages/goods/detail',
					query: {
						id: e,
					}
				})
			},
			onLook(e,i){
				uni.previewImage({
					urls: e,
					current:i
				})
			},
			toStore(e){
				this.$Router.push({
					path: '/pages/store/index',
					query: {
						id: e,
					}
				})
			},
			// 获取列表
			getList(){
				let that = this
				this.loadStatus = 'loading'
				this.$http('goods.getBrowseHome',{
					UId: uni.getStorageSync('UId') || '',
					page: that.page,
					size: 10
				})
				.then(res=>{
					if(res.length > 0){
						let list = res
						that.resList.length == 0 ? that.resList = list : that.resList = that.resList.concat(list)
						res.length == 10 ? that.loadStatus = 'loadmore' : that.loadStatus = 'nomore'
					}else{
						// 没有更多
						that.onEnd = true
						that.loadStatus = 'nomore'
					}
				})
			},
      jump(path, query) {
        if (uni.getStorageSync("UId") > 0) {
          this.$Router.push({
            path: path,
            query: query
          });
        } else {
          // #ifdef MP-WEIXIN
          uni.showToast({
            title: '请登录后操作',
            icon: 'none'
          });
          // #endif
          // #ifdef APP-PLUS
          uni.navigateTo({
            url: "/subunimodules/uni-id-pages/pages/login/login-withoutpwd?type=" + this.loginType
          })
          // #endif
        }
      },
		}
	}
</script>

<style lang="scss" scoped>
.backBtn{
  position: fixed;
  top: 80rpx;
  left: 20rpx;
  z-index: 999;
  padding: 15rpx;
  background: #fa4d44;
  border-radius: 30rpx;
  color: #fff;
}
	img{
		width: 200rpx;
		margin-right: 30rpx;
		height: 200rpx;
	}
	.store-box{
		// margin-top: 180rpx;
		padding: 10rpx;
		.store-img{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.img-card{
				border-radius: 10rpx;
				width: 210rpx;
				height: 210rpx;
				// background-color: skyblue;
				overflow: hidden;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.store-card{
		width: 100%;
		height: 370rpx;
		background-color: #fff;
		border-radius: 25rpx;
		.store-btn{
			width: 150rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 50rpx;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
			background: #FA4D44;
		}
		.store-title{
			height: 150rpx;
			// background-color: skyblue;
			display: flex;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title-left{
				display: flex;
				align-items: center;
				.title-img{
					width: 100rpx;
					height: 100rpx;
					// background-color: red;
					border-radius: 50%;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.title-right{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					.title-top{
						font-weight: 600;
						font-size: 33rpx;
					}
					.title-info{
						// display: flex;
						// align-items: center;
						margin-top: 10rpx;
						font-size: 23rpx;
						color: #999999;
						max-width: 340rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						i{
							margin-left: 10rpx;
							margin-right: 10rpx;
							height: 30rpx;
							border-left: 1rpx solid #999999;
						}
					}
				}
			}
		}
	}
	
	.card-box{
		margin-top: 30rpx;
		.card{
			width: 100%;
			height: 100%;
			background-color: #fff;
			padding: 30rpx 30rpx 30rpx 20rpx;
			display: flex;
			margin-bottom: 20rpx;
			.card-avatar{
				width: 100rpx;
				border-radius: 50%;
				img{
					border-radius: 50%;
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	.contents{
		width: 600rpx;
		padding: 25rpx;
		border-radius: 25rpx;
		background-color: #fff;
	}
	.copy-btn{
		margin-left: 220rpx;
		width: 150rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 5rpx;
		margin-top: 30rpx;
		background-color: #fff;
		color: #f96523;
	}
	.card-content{
		height: 100%;
		display: flex;
		width: 100%;
		flex-direction: column;
		background-color: #ffffff;
		padding-bottom: 20rpx;
		// justify-content: center;
		.content{
			width: 700rpx;
			height: 100%;
			display: flex;
			text-align: start;
		}
		.img-box{
			margin-left:100rpx;
			margin-top: 20rpx;
			image{
				width: 150rpx;
				height: 150rpx;
				margin-right: 20rpx;
			}
		}
	}
	.tip{
		width: 600rpx;
		height: 70rpx;
		background-color: #f5f5f5;
		line-height: 70rpx;
		color: #9e9e9e;
		display: flex;
		margin-left: 100rpx;
		margin-top: 20rpx;
		.tip-content{
			margin-left: 10rpx;
			width: 450rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.arrow{
			margin-left: 40rpx;
			img{
				width: 30rpx;
				height: 30rpx;
				margin-top: 20rpx;
			}
		}
	}
	.store-name{
		width: 100rpx;
		height: 100rpx;
		background: #fa4d44;
		display: flex;
		color: #fff;
		font-size: 35rpx;
		justify-content: center;
		align-items: center;
	}
.topBox{
  //background: red;
  background-size: 100% !important;
  position: fixed;
  width: 100%;
  // height: 250rpx;
  top: 0;
  z-index: 999;
  padding-top: var(--status-bar-height);
  transition: all 0.1s;
  background: #fff;
}
.tabs{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 130rpx;
  color: black;
  font-size: 29rpx;
  padding-top: 25rpx;
}
.tab-text{
  position: relative;
}
.tab-text::after{
  content: '';
  width: 40rpx;
  height: 5rpx;
  //background: #fff;
  position: absolute;
  border-radius: 20rpx;
  bottom: -10rpx;
  left: 50%;
  background: #f86c1d;
  transform: translateX(-50%);
}
.indexsearch{
  width: 94%;
  height: 60rpx;
  margin-left: 3%;
  background-color: #e8eef4;
  border-radius: 30rpx;
  color: #636a70;
  display: flex;
  justify-content: center;
  align-items: center;
  //margin-top: 10rpx;
  margin-bottom: 10rpx;
}
.tab-text{
      position: relative;
	  font-size: 40rpx !important;
	  font-weight: 600 !important;
    }
	.tab-texts{
		font-size: 35rpx;
	}
.tab-text::after{
  content: '';
  width: 40rpx;
  height: 5rpx;
  //background: #fff;
  position: absolute;
  border-radius: 20rpx;
  bottom: -10rpx;
  left: 50%;
  background: #f86c1d;
  transform: translateX(-50%);
}
.sign{
	background: url('https://image.hzwltb69.com/app/date/2023/signB.png') no-repeat;
	background-size: 100%;
	text-align: right;
	padding-right: 12rpx;
	padding-top: 8rpx;
	font-size: 26rpx;
  }
</style>